<template>
  <view class="home">
    <div class="head">
      <view class="top">
        <navbar-home></navbar-home>
      </view>
      <!-- 轮播图 -->
      <view class="carousel">
        <carousel></carousel>
      </view>
      <!-- 公告通知 -->
      <view class="notice">
        <notice></notice>
      </view>
    </div>
    <!-- 金刚区 -->
    <view class="quick">
      <quick></quick>
    </view>
    <view class="com-service">
      <image class="service" @tap="openComService" src="/static/images/service/kefu.png" />
      <view>
        客服咨询
      </view>
    </view>
    <uni-popup ref="comservice" type="bottom" background-color="transparent">
      <cust-service @closePop="closeComService"></cust-service>
    </uni-popup>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref
  } from 'vue'
  import notice from './notice/notice.vue';
  import carousel from './carousel/carousel .vue';
  import quick from './quick/quick.vue';
  import custService from '@/components/cust-service/cust-service.vue';

  import {
    onLoad
  } from '@dcloudio/uni-app'

  const comservice = ref(null)

  function openComService() {
    if (comservice.value) {
      comservice.value.open()
    }
  }

  function closeComService() {
    if (comservice.value) {
      comservice.value.close()
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    background-color: $uni-bg-color-grey;

    .head {
      position: fixed;
      width: 100%;
      top: 0px;
      z-index: 100;

      .carousel {
        margin-top: 4rpx;
      }

      .notice {
        margin-top: 10rpx;
        width: 100%;
      }
    }

    .quick {
      margin-top: 620rpx;
    }

    .hospital {
      margin-top: 20rpx;
    }

    .com-service {
      position: fixed;
      bottom: 80rpx;
      right: 20rpx;
      text-align: center;
      font-size: 30rpx;
      font-weight: 700;
      color: #22b9a3;

      .service {
        width: 150rpx;
        height: 150rpx;
      }
    }


  }
</style>